<!DOCTYPE html>
<html>

<head>
    <title>Vue.js 入门</title>
</head>

<body>
    <!-- 1、准备容器 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in fruits">
                {{index}}-{{item}}</li>
        </ul>

        <h1>小黑的书架</h1>
        <ul>
            <li v-for="(item,index) in books">
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <button @click="deleteOne(item.id)">删除</button>
                <span></span>
            </li>
        </ul>

        账户：<input type="text" v-model="username"> <br><br>
        密码：<input type="text" v-model="password"> <br><br>
        <button @click="loginFun()">登录</button>
        <button @click="clearUserAndPassword()">重置</button>


    </div>

    <!-- 2、引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        // Vue 实例 在全局环境，就有了Vue构造函数
        const app = new Vue({
            // 通过el 配置选择器
            el: '#app',
            data: {
                fruits: ["西瓜", "苹果", "橘子", "荔枝"],
                books: [
                    { id: 1, name: "《三国演义》", author: "罗贯中" },
                    { id: 2, name: "《红楼梦》", author: "曹雪芹" },
                    { id: 3, name: "水浒传", author: "施耐庵" },
                    { id: 4, name: "西游记", author: "吴承恩" },
                ],
                deleteOne(ii) {
                    console.log(this.books.filter(item => item.id != ii));

                    this.books = this.books.filter(item => item.id != ii);
                },
                username: "",
                password: "",
                loginFun() {
                    alert(this.username + this.password);
                },
                clearUserAndPassword() {
                    this.username = "";
                    this.password = "";
                }


            }
        });
    </script>
</body>

</html>